<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="560" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form ref="formRef" :model="formState" :rules="modalRules" layout="vertical" class="p-20 pb-2" :label-col="{ span: 23 }" :wrapper-col="{ span: 23 }">
        <a-form-item :label="$t('deviceManage.equipmentCode')" name="code" :rules="[{ required: !isAutoCreate, message: $t('other.pleaseInputMakeNo') }]">
          <a-input v-model:value.trim="formState.code" :placeholder="isAutoCreate ?$t('common.systemAutoGenerate') : $t('common.pleaseInput') " :maxLength="6" :disabled="isAutoCreate" />
        </a-form-item>
        <a-row class="relative bottom-8 mb-10" v-if="isAddOpt"> 
          <a-col >
            {{ $t('other.automatically') }}
            <a-switch v-model:checked="isAutoCreate" size="small" @change="onSwitchChange" />
          </a-col>
        </a-row>
        <a-form-item :label="$t('deviceManage.equipmentName')" name="name">
          <a-input v-model:value.trim="formState.name" :placeholder="$t('deviceManage.pleaseInputEquipmentName')" :maxLength="10" />
        </a-form-item>
        <a-form-item :label="$t('deviceManage.macAddr')" name="macAddr">
          <a-input v-model:value.trim="formState.macAddr" :placeholder="$t('deviceManage.pleaseInputMac')" />
        </a-form-item>
        <a-form-item :label="$t('common.startState')" name="status">
          <a-radio-group v-model:value="formState.status">
            <a-radio v-for="(el,i) in optionsList" :value="el.value" :key="i">{{el.label}}</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{ $t('common.cancel') }}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{ $t('common.ok') }}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="operateEmpModal">
import { ref, nextTick, onMounted } from 'vue'
import { cloneDeep } from 'lodash'
import axios from '@/utils/request'
import { message } from 'ant-design-vue'
import { modalRules } from './config'
import i18n from '@/locales/index'
const { t } = i18n.global

const emits = defineEmits(['ok'])
let visible = ref(false)
let confirmLoading = ref(false)
let formState = ref({})
const formRef = ref()
const title = ref('')
let optionsList = [
  { value: 0, label: t('common.start') },
  { value: 1, label: t('other.foridden') },
]
let isAutoCreate = ref(true)
let recordInfo = ref({})
let isAddOpt = ref(false)
const edit = async (record, isEdit) => {
  isAddOpt.value = !isEdit
  if (isEdit){
    title.value = t('other.editTerminal')
  }else {
    title.value =t('other.addTerminal')
  }

  visible.value = true
  recordInfo.value = Object.assign({}, record)
  await nextTick()
  formState.value = recordInfo.value
  formRef.value.resetFields()
}
const onSwitchChange = () => {
  if (isAutoCreate.value) {
    formRef.value.clearValidate(['code'])
    formState.value.code = null
  }
}
const handleOk = async () => {
  try {
    await formRef.value.validateFields()
    let params = cloneDeep(formState.value)
    confirmLoading.value = true
    let url = isAddOpt.value ? '/api/device/terminal-device/save' : '/api/device/terminal-device/edit'
    if (!isAddOpt.value) params.id = recordInfo.value.id
    let res = await axios.postAction(url, params)
    confirmLoading.value = false
    if (res.success) {
      message.success(res.msg)
      emits('ok')
      handleCancel()
    } else {
      confirmLoading.value = false
    }
  } catch {
    confirmLoading.value = false
    console.log('error')
  }
}
const handleCancel = () => {
  formState.value = {}
  confirmLoading.value = false
  formRef.value.resetFields()
  visible.value = false
  isAutoCreate.value = true
}
onMounted(async () => {

})
defineExpose({
  edit
})

</script>